<template>
    <div class="branch">
        <x-header :left-options="{backText: ''}">支部风采</x-header>
        <div class="branchGroup">
            <div class="searchBox">
                <search
                  v-model="keyword"
                  :auto-fixed="false"
                  position="fixed"
                  top="46px"
                  @on-change="filterSearch"
                  ref="search"></search>
            </div>
            <div class="branchLists">
                <group>
                    <cell :title="item.department" v-for="(item,index) of searchResults" :key="index" :link="{name: 'BranchInfo', params: {branchid: item.id}}">
                        <img slot="icon" src="./zbfc_zbtb.png" alt="" class="weui-cell_icon">
                    </cell>
                </group>
            </div>
        </div>
    </div>
</template>

<script>
import { XHeader, Search, Group, Cell, debounce } from "vux";
import { mapGetters } from "vuex";
export default {
  components: {
    XHeader,
    Group,
    Search,
    Cell
  },
  computed: {
    ...mapGetters(["branchList"])
  },
  watch: {
    branchList: function(Value) {
      this.branchs = Value;
    },
    branchs: function(val) {
      this.searchResults = val;
    }
  },
  created() {
    this.$store.dispatch("getBranchList");
  },
  activated() {
    this.branchs = this.branchList;
  },
  data() {
    return {
      keyword: "",
      branchs: [],
      searchResults: []
    };
  },
  methods: {
    filterSearch(keyword) {
      if (!!keyword) {
        this.searchResults = this.branchs.filter(item => {
          return item.department.indexOf(keyword) !== -1;
        });
      } else {
        this.searchResults = this.branchs;
      }
    }
  }
};
</script>

<style lang="less">
.branch {
  width: 100%;
  min-height: 100%;
  background: rgb(245, 245, 249);
  .branchGroup {
    padding: 2.875rem 0 0;
    height: 100%;
    text-align: center;
    .searchBox {
      padding: 0.75rem 0 0.5rem;
      width: 22.1875rem;
      display: inline-block;
      .weui-search-bar {
        background: transparent;
        padding: 0;
        &::before,
        &::after {
          display: none;
        }
      }
    }
    .branchLists {
      .weui-cells {
        margin: 0;
      }
      .weui-cell {
        padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
      }
      .vux-cell-primary {
        text-align: left;
      }
      .vux-label {
        font-size: 1.125rem;
      }
      .weui-cell_icon {
        display: block;
        width: 1.6875rem;
        margin-right: 0.375rem;
      }
    }
  }
}
</style>